<template>
  <div class="divBox">
    <div id="div1">
      <el-tabs v-model="typeStatus" type="card" @tab-click="ShowClick()"
               style="background-color: white;font-size: 10px">
        <el-tab-pane :label="totalNumber" name="0"></el-tab-pane>
        <el-tab-pane :label="makeCount" name="1"></el-tab-pane>
        <el-tab-pane :label="completeMinimap" name="2"></el-tab-pane>
        <el-tab-pane :label="waiting" name="3"></el-tab-pane>
        <el-tab-pane :label="cancel" name="4"></el-tab-pane>
        <el-tab-pane :label="finished" name="5"></el-tab-pane>
      </el-tabs>

      <br>
      <br>
      <!--    div1-->
    </div>

    <div id="div2">
      <el-input
        size="small"
        placeholder="搜索..."
        prefix-icon="el-icon-search"
        v-model="searchCriteria"
        @blur="QueryAllDetail(1)"
      >
      </el-input>
      <!--        div2-->
    </div>


    <div id="div3">
      <el-select v-model="companyId"
                 placeholder="所属公司 全部"
                 size="small"
                 @change="QueryAllDetail(1)"
      >
        <el-option value=" " label="全部"></el-option>
        <el-option
          size="small"
          v-for="item in tableCompany"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        >
        </el-option>
      </el-select>
      &nbsp;

      <el-select v-model="selectModelLevel" placeholder="附件等级 全部"
                 size="small"
                 @change="QueryAllDetail(1)"
      >
        <el-option value="" label="全部"></el-option>
        <el-option
          v-for="item in modelLevel"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <!--    div3-->
    </div>


    <div id="div4">
      <el-table
        :data="tableData"
        style="width: 100%;font-size: 10px"
        :row-class-name="tableRowClassName">
        <el-table-column
          prop="image"
          label="任务图"
          width="180"
        >
          <template #default="scope">
            <img  v-if="scope.row.image!==null" style="height: 50px;width: 50px" :src="scope.row.image">
            <img  v-if="scope.row.image===null" style="height: 50px;width: 50px" src="../../../src/img/395880.jpg">
          </template>
        </el-table-column>
        <el-table-column
          prop="taskName"
          label="任务名称"
          width="150">
        </el-table-column>
        <el-table-column
          prop="gnflName"
          label="空间名称"
          width="100"
        >
        </el-table-column>
        <el-table-column
          prop="makeName"
          label="制作员"
          width="100">
        </el-table-column>
        <el-table-column
          prop="modelName"
          label="模型师"
          width="100">
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="下单时间"
          width="180">
        </el-table-column>
        <el-table-column
          prop="status"
          label="任务状态"
        >
          <template #default="scope">
            <el-tag v-if="scope.row.status===1">制作中</el-tag>
            <el-tag type="warning" v-if="scope.row.status===2">完成小图</el-tag>
            <el-tag type="info" v-if="scope.row.status===3">等待中</el-tag>

            <el-tag type="danger" v-if="scope.row.status===4">已取消</el-tag>
            <el-tag type="success" v-if="scope.row.status===5">已完成</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="money"
          label="任务金额"
          width="100"
        >
          <template #default="scope">
<!--            <el-progress :percentage="scope.row.course" color="#FF0000" size="small"-->
<!--                         v-if="scope.row.course!==100&&scope.row.course!=-1&&scope.row.course!=-2"></el-progress>-->
<!--            <el-progress :percentage="scope.row.course" status="success" size="small"-->
<!--                         v-if="scope.row.course===100"></el-progress>-->

<!--            <el-tag type="success" size="small" v-if="scope.row.balanceOfPayment===0">付款完毕</el-tag>-->

            <el-text style="color: #0bb20c" type="success" size="small" v-if="scope.row.balanceOfPayment===0" >付款完毕</el-text>
<!--            <el-tag type="warning" size="small" v-if="scope.row.balanceOfPayment===-1">正在制作中</el-tag>-->
<!--            <el-tag type="info" size="small" v-if="scope.row.balanceOfPayment===-2">任务已取消</el-tag>-->

<!--            <el-tag type="danger" size="small" v-if="scope.row.balanceOfPayment>0">-->
<!--              等待付款{{ scope.row.balanceOfPayment }}-->
<!--            </el-tag>-->


            <el-text type="danger" size="small" v-if="scope.row.balanceOfPayment>0" style="color: red">
              等待付款{{ scope.row.balanceOfPayment }}
            </el-text>
            &nbsp;&nbsp;&nbsp;

            <el-text>(共{{scope.row.money}})</el-text>
          </template>
        </el-table-column>
        <el-table-column
          prop="jingpin"
          width="100"
          label="图片评级"
        >
          <template #default="scope">
            &nbsp;&nbsp;&nbsp;&nbsp;
            <span v-if="scope.row.jingpin===0" style="font-size: 5px">--------</span>
            <el-tag type="warning" v-if="scope.row.jingpin===1">精品</el-tag>
            <span v-if="scope.row.jingpin===2">暂未评级</span>
          </template>
        </el-table-column>
        <el-table-column
          prop=""
          label="操作"
          width="180"
        >
          <template #default="scope">
            <span class="a_operation" @click="ClickParticulars(scope.row)">详情</span>
            &nbsp;&nbsp;&nbsp;
            <el-dropdown trigger="click"  v-if="scope.row.status===1||scope.row.status===2" >
        <span class="el-dropdown-link" style="color: #1787FB;font-size: 9px" >
         更多<i class="el-icon-caret-bottom el-icon--right"></i>
        </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item class="clearfix" v-if="scope.row.image===null">
                  <span    class="a_operation" @click="ClickUploadMaster(scope.row)">上传主图</span>
                  <el-badge class="mark"/>
                </el-dropdown-item>
                <el-dropdown-item class="clearfix" v-if="scope.row.albumList===null">
                  <span  class="a_operation" @click="IsUploadPresentedPic1(scope.row)">上传赠图</span>
<!--                  <span v-if="scope.row.albumList!==null" class="a_operation" disabled="">上传赠图</span>-->
                  <el-badge class="mark"/>
                </el-dropdown-item>
                <el-dropdown-item class="clearfix" v-if="scope.row.modelSize===null">
                  <span   class="a_operation" @click="UploadAttachment(scope.row)">上传附件</span>
                  <el-badge class="mark"/>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>


<!--            <el-dropdown trigger="click"  v-if="scope.row.status===3||scope.row.status===4||scope.row.status===5">-->
<!--        <span class="el-dropdown-link" style="color: #1787FB;font-size: 9px">-->
<!--         更多<i class="el-icon-caret-bottom el-icon&#45;&#45;right"></i>-->
<!--        </span>-->
<!--              <el-dropdown-menu slot="dropdown">-->
<!--                <el-dropdown-item class="clearfix">-->
<!--                  <span class="a_operation" disabled="">上传主图</span>-->
<!--                  <el-badge class="mark"/>-->
<!--                </el-dropdown-item>-->
<!--                <el-dropdown-item class="clearfix">-->
<!--                  <span class="a_operation" disabled="">上传赠图</span>-->
<!--                  <el-badge class="mark"/>-->
<!--                </el-dropdown-item>-->
<!--                <el-dropdown-item class="clearfix">-->
<!--                  <span class="a_operation" disabled="">上传附件</span>-->
<!--                  <el-badge class="mark"/>-->
<!--                </el-dropdown-item>-->
<!--              </el-dropdown-menu>-->
<!--            </el-dropdown>-->


          </template>
        </el-table-column>
      </el-table>

      <!--    div4-->
    </div>
    <div id="Limit">
      <el-pagination
        @current-change="QueryAllDetail"
        :page-size="pageSize"
        :current-page="pagNum"
        layout="total, prev, pager, next"
        :total="pages">
      </el-pagination>
    </div>
    <!--    任务列表div-->

    <el-dialog
      style="font-size: 10px"
      id="dialog—task—list"
      :title="this.taskDateName"
      :visible.sync="taskDesigning"
      :data="taskMsg"
      class="dialog"
      width="37%"
      :before-close="handleClose">
      <span id="span1">基本信息</span>
      <br>
      <div>
        <el-row>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <span class="menu_span">任务编号:</span>{{ taskMsg.taskNo }}<span></span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple-light">
              <span class="menu_span">订单金额:</span>
              <span v-if="taskMsg.balanceOfPayment===0"><i
                class="el-icon-success"></i>支付完毕 (共{{ taskMsg.money }})</span>
              <span v-if="taskMsg.balanceOfPayment>0"><i
                class="el-icon-question"></i>待支付{{ taskMsg.balanceOfPayment }} (共{{taskMsg.money }})</span>
              <el-tag size="small" v-if="taskMsg.balanceOfPayment===-1">正在制作,暂未商价</el-tag>
              <el-tag size="small" type="danger" v-if="taskMsg.balanceOfPayment===-2">订单已取消</el-tag>
            </div>
          </el-col>
        </el-row>


        <el-row>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <span class="menu_span">制作人员:</span> <span>{{ taskMsg.makeName }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple-light">
              <span class="menu_span">任务状态:</span>
              <el-tag size="small" v-if="taskMsg.status===1">制作中</el-tag>
              <el-tag size="small" type="warning" v-if="taskMsg.status===2">完成小图</el-tag>
              <el-tag size="small" type="info" v-if="taskMsg.status===3">等待中</el-tag>

              <el-tag size="small" type="danger" v-if="taskMsg.status===4">已取消</el-tag>
              <el-tag size="small" type="success" v-if="taskMsg.status===5">已完成</el-tag>
            </div>
          </el-col>
        </el-row>


        <el-row>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <span class="menu_span">模型师:</span> <span>{{ taskMsg.modelName }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple-light">
              <span class="menu_span">大图时间:</span> <span>{{ taskMsg.pictureActTime }}</span>
            </div>
          </el-col>
        </el-row>


        <el-row>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <span class="menu_span">所属订单:</span> <span>{{ order.orderTitle }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple-light">
              <span class="menu_span">下单时间:</span> <span>{{ taskMsg.createTime }}</span>
            </div>
          </el-col>
        </el-row>


        <el-row>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <span class="menu_span">客户评价:</span>
              <el-tag size="small" v-if="taskMsg.status===5||taskMsg.status===2">好评</el-tag>
              <el-tag size="small" type="danger" v-if="taskMsg.status===4">任务已取消,暂无评价</el-tag>
              <el-tag size="small" type="info" v-if="taskMsg.status===1">任务未完成,暂无评价</el-tag>
              <el-tag size="small" type="info" v-if="taskMsg.status===3">任务还未接取</el-tag>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple-light">
              <span class="menu_span">订单编号:</span> <span>{{ order.orderNo }}</span>
            </div>
          </el-col>
        </el-row>


        <el-row>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <span class="menu_span">备注:</span> <span>{{ taskMsg.remark }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple-light">
              <span class="menu_span">订单附件:</span>

              <span v-if="taskMsg.status===1||taskMsg.status===2||taskMsg.status===5">
                {{taskMsg.modelFileName}}.zip</span>
              <span v-if="taskMsg.status===3||taskMsg.status===4">------</span>
            </div>
          </el-col>
        </el-row>
      </div>


      <div v-if="taskMsg.status===5||taskMsg.status===2||taskMsg.status===1">
        <br>

<!--        <span style=" font-size: 16px;">图片</span>-->
<!--        <br>-->
<!--        <div v-for="msg in taskImage" style="display: inline-block;padding-right: 15px;">-->
<!--          <img :src="msg.image" style="width: 100px;height: 100px">-->

<!--        </div>-->
        <div v-if="taskMsg.image!==null">
        <span style=" font-size: 16px;" >主图</span>
        <br>
          <img :src="taskMsg.image" style="width: 100px;height: 100px"/>
        </div>


        <div v-if="taskMsg.image===null">
          <span style=" font-size: 16px;">主图</span>
          <br>
          <img src="../../../src/img/395880.jpg" style="width: 100px;height: 100px"/>
        </div>

        <div v-if="taskMsg.albumList!=null">
          <span style=" font-size: 16px;">赠图</span>
          <br>
          <div v-for="msg in taskMsg.albumList" style="display: inline-block;padding-right: 15px;">
            <img :src="msg" style="width: 100px;height: 100px">
          </div>
        </div>



        <br>
        <div v-if="taskMsg.modelSize!==null">
        <span class="span1">绑定文件</span>

        <br>
        <div id="div10" >
          <div style="display: inline-block;position: relative;left: 30px;top: 20px">
          <img src="../../../src/img/252a54de_E776297_69cf2d91.png" style="width: 50px;height: 50px"/>
          </div>
          <span style="display: inline-block;position: relative;left: 50px;top: -10px">{{taskMsg.modelFileName}}.zip</span>
<!--          <a href="" ></a>-->
          <el-link :href="taskMsg.modelFile"  type="primary" style="display: inline-block;position: relative;bottom: 20px;left: 270px;">下载({{taskMsg.modelSize}})</el-link>
          <!--      div10-->
          <div style="display: inline-block;position: relative;left: 105px">
            <span>材质贴图:{{taskMsg.modelCzName}}</span>&nbsp;&nbsp;
            <span>材质贴图:{{taskMsg.modelLightName}}</span>&nbsp;&nbsp;
            <span>材质贴图:{{taskMsg.modelMaxName}}</span>
          </div>
        </div>
        <!--          任务为完成状态才显示-->
      </div>
      </div>


      <br>
      <!--        任务状态为制作中和完成小图时不能删除任务-->
      <el-button size="small" id="deleteTask" @click="deleteTask(taskMsg.id)" style="font-size: 14px"
                 v-if="taskMsg.status===3||taskMsg.status===4||taskMsg.status===5">删除任务
      </el-button>
    </el-dialog>

    <el-dialog
      title="编辑主图信息"
      :visible.sync="IsUploadMasterPic"
      width="30%"
      :before-close="handleClose"
      id="dialog-master-pic"
    >
      <div>

        <el-upload :class="{ 'hide_box': upload_btn }" action=" " list-type="picture-card" :on-remove="handleRemove"
                   :on-change="handleUpload" :limit="1" :http-request="handleUploadImg">
          <el-icon class="avatar-uploader-icon">
            <Plus/>
          </el-icon>
        </el-upload>
      </div>
      <br>
      <br>
      <el-form ref="from" label-width="80px">

        <el-form-item label="场景分类" prop="name">
          <el-cascader
            ref="cascaderAddr"
            v-model="selectSceneType1"
            :options="sceneType"
            :props="cascaderProps"
            style=" width: 200px"
            @change="Show(selectSceneType1)"
          >
          </el-cascader>
        </el-form-item>
        <el-form-item label="风格分类" prop="name">
          <el-select v-model="selectStyleType" placeholder="请选择" size="small">
            <el-option
              v-for="item in styleType"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="图片类型" prop="name">
          <el-select v-model="selectPicType" placeholder="请选择" size="small">
            <el-option value="1" label="全景"></el-option>
            <el-option value="2" label="平面"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      &nbsp;&nbsp;&nbsp;
      <el-button @click="IsUploadMasterPic = false">取 消</el-button>
      <el-button type="primary"  @click="clickMain()">确 定</el-button>

    </el-dialog>


    <el-dialog
      id="dialog-presented-pic"
      title="上传赠图"
      :visible.sync="IsUploadPresentedPic"
      width="70%"
      class="abow_dialog"
      :before-close="handleClose">
      <!--      <span slot="footer" class="dialog-footer">-->
      <div>
        <ul class="infinite-list">
          <li class="infinite-list-item">
            <el-checkbox v-model="checked"></el-checkbox>
            <el-upload :class="{ 'upload_presented_pic': upload_btn1 }" action=" " list-type="picture-card" :on-remove="handleRemove"
                       :on-change="uploadPresentedPic" :limit="1" :http-request="handleUpload1">
              <el-icon class="avatar-uploader-icon">
                <Plus/>
              </el-icon>
            </el-upload>
<!--            <el-dialog :visible.sync="pic">
              <img width="=30%" :src="dialogImageUrl" alt="">
            </el-dialog>-->
            <el-form :inline="true">
              <el-form-item label="场景分类" prop="name">
                <el-cascader
                  ref="cascaderAddr"
                  v-model="selectSceneType"
                  :options="sceneType"
                  :props="cascaderProps"
                  style=" width: 200px"
                  @change="Show(selectSceneType)"
                >
                </el-cascader>
              </el-form-item>
              <el-form-item label="风格分类" prop="name">
                <el-select v-model="selectStyleType3" placeholder="请选择" size="small">
                  <el-option
                    v-for="item in styleType"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="图片类型" prop="name">
                <el-select v-model="selectPicType2" placeholder="请选择" size="small">
                  <el-option value="1" label="全景"></el-option>
                  <el-option value="2" label="平面"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </li>


          <li class="infinite-list-item">
            <el-checkbox v-model="checked"></el-checkbox>
            <el-upload
              action=""
              list-type="picture-card"
              :on-change="uploadPresentedPic"
              :on-preview="handlePictureCardPreview"
              :class="{ 'upload_presented_pic': upload_btn2 }"
              :http-request="handleUpload2"
              :on-remove="handleRemove">
              <i class="el-icon-plus"></i>
            </el-upload>
<!--            <el-dialog :visible.sync="pic">-->
<!--              <img width="30%" height="80%" :src="dialogImageUrl" alt="">-->
<!--            </el-dialog>-->
            <el-form :inline="true">

              <el-form-item label="场景分类" prop="name">
                <el-cascader
                  ref="cascaderAddr"
                  v-model="selectSceneType"
                  :options="sceneType"
                  :props="cascaderProps"
                  style=" width: 200px"
                  @change="Show(selectSceneType)"
                >
                </el-cascader>
              </el-form-item>
              <el-form-item label="风格分类" prop="name">
                <el-select v-model="selectStyleType4" placeholder="请选择" size="small">
                  <el-option
                    v-for="item in styleType"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="图片类型" prop="name">
                <el-select v-model="selectPicType3" placeholder="请选择" size="small">
                  <el-option value="1" label="全景"></el-option>
                  <el-option value="2" label="平面"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </li>
          <li class="infinite-list-item">
            <el-checkbox v-model="checked"></el-checkbox>
            <el-upload


              action=""
              list-type="picture-card"
              :on-change="uploadPresentedPic"
              :on-preview="handlePictureCardPreview"
              :http-request="handleUpload3"
              :class="{ 'upload_presented_pic': upload_btn3 }"
              :on-remove="handleRemove">
              <i class="el-icon-plus"></i>
            </el-upload>
<!--            <el-dialog :visible.sync="pic">-->
<!--              <img width="=30%" :src="dialogImageUrl" alt="">-->
<!--            </el-dialog>-->
            <el-form :inline="true">

              <el-form-item label="场景分类" prop="name">
                <el-cascader
                  ref="cascaderAddr"
                  v-model="selectSceneType"
                  :options="sceneType"
                  :props="cascaderProps"
                  style=" width: 200px"
                >
                </el-cascader>
              </el-form-item>
              <el-form-item label="风格分类" prop="name">
                <el-select v-model="selectStyleType5" placeholder="请选择" size="small">
                  <el-option
                    v-for="item in styleType"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="图片类型" prop="name">
                <el-select v-model="selectPicType4" placeholder="请选择" size="small">
                  <el-option value="1" label="全景"></el-option>
                  <el-option value="2" label="平面"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </li>
          <li class="infinite-list-item">
            <el-checkbox v-model="checked"></el-checkbox>
            <el-upload


              action=""
              list-type="picture-card"
              :on-change="uploadPresentedPic"
              :on-preview="handlePictureCardPreview"
              :http-request="handleUpload4"
              :class="{ 'upload_presented_pic': upload_btn4 }"
              :on-remove="handleRemove">
              <i class="el-icon-plus"></i>
            </el-upload>
<!--            <el-dialog :visible.sync="pic">-->
<!--              <img width="=30%" :src="dialogImageUrl" alt="" id="">-->
<!--            </el-dialog>-->
            <el-form :inline="true">

              <el-form-item label="场景分类" prop="name">
                <el-cascader
                  ref="cascaderAddr"
                  v-model="selectSceneType"
                  :options="sceneType"
                  :props="cascaderProps"
                  style=" width: 200px"
                >
                </el-cascader>
              </el-form-item>
              <el-form-item label="风格分类" prop="name">
                <el-select v-model="selectStyleType6" placeholder="请选择" size="small">
                  <el-option
                    v-for="item in styleType"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="图片类型" prop="name">
                <el-select v-model="selectPicType5" placeholder="请选择" size="small">
                  <el-option value="1" label="全景"></el-option>
                  <el-option value="2" label="平面"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </li>
          <li class="infinite-list-item">
            <el-checkbox v-model="checked"></el-checkbox>
            <el-upload


              action=""
              list-type="picture-card"
              :on-change="uploadPresentedPic"
              :on-preview="handlePictureCardPreview"
              :http-request="handleUpload5"
              :class="{ 'upload_presented_pic': upload_btn5 }"
              :on-remove="handleRemove">
              <i class="el-icon-plus"></i>
            </el-upload>
<!--            <el-dialog :visible.sync="pic">-->
<!--              <img width="=30%" :src="dialogImageUrl" alt="" id="el-upload-pic">-->
<!--            </el-dialog>-->
            <el-form :inline="true">

              <el-form-item label="场景分类" prop="name">
                <el-cascader
                  ref="cascaderAddr"
                  v-model="selectSceneType"
                  :options="sceneType"
                  :props="cascaderProps"
                  style=" width: 200px"
                >
                </el-cascader>
              </el-form-item>
              <el-form-item label="风格分类" prop="name">
                <el-select v-model="selectStyleType7" placeholder="请选择" size="small">
                  <el-option
                    v-for="item in styleType"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="图片类型" prop="name">
                <el-select v-model="selectPicType6" placeholder="请选择" size="small">
                  <el-option value="1" label="全景"></el-option>
                  <el-option value="2" label="平面"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </li>
        </ul>
      </div>
      &nbsp;<div id="butPresented">
      <el-button @click="exit">取 消</el-button>
      <el-button type="primary" @click="uploadPictures()">确 定</el-button>
    </div>
      <!--  </span>-->
    </el-dialog>




    <el-dialog
      id="dialog-upload-attachment"
      class="dialog"
      title="上传附件"
      :visible.sync="IsUploadAttachment"
      width="30%"
      :before-close="handleClose">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="选择附件" prop="name">
          <el-upload
            class="upload-demo"
            ref="classZip"
            action=""
            :data="{taskId:helloTaskId}"
            :on-change="upAttachment1"
            name="classZip"
            :on-remove="handleRemove"
            :limit="1"
            :auto-upload="false">
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            <div slot="tip" class="el-upload__tip" style="color: red;">{{ message }}</div>
          </el-upload>

          <el-dialog :visible.sync="dialogVisible2">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-form-item>
        <el-form-item label="材质贴图:" prop="region">
          <el-select v-model="selectCZ" @change="getCz" placeholder="请选择" size="small">
            <el-option
              v-for="item in moderCZ"
              :key="item.value"
              :label="item.label"
              :value="{value:item.value,label:item.label}">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="灯光属性:" prop="region">
          <el-select v-model="selectLight" @change="getLight" placeholder="请选择" size="small">
            <el-option
              v-for="item in moderLight"
              :key="item.value"
              :label="item.label"
              :value="{value:item.value,label:item.label}">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="MAX版本:" prop="region">
          <el-select v-model="selectMax" @change="getMax" placeholder="请选择" size="small">
            <el-option
              v-for="item in moderMax"
              :key="item.value"
              :label="item.label"
              :value="{value:item.value,label:item.label}">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <div id="div11">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        &nbsp;&nbsp;&nbsp;
        <el-button @click="dialogVisible3 = false" size="small">取 消</el-button>
        <el-button type="primary" @click="upAttachments" size="small">确认上传</el-button>
      </div>

    </el-dialog>


  </div>


</template>

<script>
import axios from "@/utils/request"
import ElementUI from 'element-ui'
import {mapGetters} from 'vuex'
import {upload, upClick, uploadPictures ,upAttachment} from "@/api/taskApi";



export default {
  name: "taskList",
  props: {},
  data() {
    return {
      //赠图变量
      imageName1:"",
      imageName2:"",
      imageName3:"",
      imageName4:"",
      imageName5:"",
      checked1:"",
      checked2:"",
      checked3:"",
      checked4:"",
      checked5:"",
      styleType1:"",
      styleType2:"",
      styleType3:"",
      styleType4:"",
      styleType5:"",

      imageType1:"",
      imageType2:"",
      imageType3:"",
      imageType4:"",
      imageType5:"",

      pic: true,
      selectPicType2:"",
      selectPicType3:"",
      selectPicType4:"",
      selectPicType5:"",
      selectPicType6:"",
      selectStyleType3:"",
      selectStyleType4:"",
      selectStyleType5:"",
      selectStyleType6:"",
      selectStyleType7:"",
      typeStatus: "",
      totalNumber: "",
      makeCount: "",
      completeMinimap: "",
      waiting: "",
      cancel: "",
      finished: "",
      status: "",
      searchCriteria: "",
      companyId: "",

      pagNum: 1,
      pageSize: 0,
      pages: 0,

      selectSceneType1:"",
      taskDesigning: false,
      taskDate: [],
      taskMsg:[],
      taskDateName: "",
      order: {},
      taskImage: [],

      IsUploadMasterPic: false,
      IsUploadPresentedPic: false,
      IsUploadAttachment: false,
      upload_btn1:false,
      upload_btn2:false,
      upload_btn3:false,
      upload_btn4:false,
      upload_btn5:false,

      //上传主图
      url:"",
      taskId1:0,

      //上传赠图
      files:[],
      images:[],
      taskId2:0,
      typeId:"",

      //上传附件
      file:[],
      taskId3:0,
      czId:0,
      czName:"",
      lightId:0,
      lightName:"",
      maxId:0,
      maxName:"",

      sceneType: [],
      selectSceneType: "",
      ParentId: 0,


      //风格类型
      styleType:{},
      selectStyleType:"",
      selectPicType:"",
      picName:"",



      activeName: 'second',
      task_type: "",
      task_list: "",
      input2: "",
      input3: "",
      value1: "",
      value3: "",
      value4: "",
      options1: {},
      options2: {},
      modelLevel:{},//附件等级
      selectModelLevel:"",
      tableData: [],
      tableDataType: [],
      tableCompany: {},
      taskList: true,
      workStatus: false,

      input2Msg: false,
      dialogImageUrl: '',
      dialogVisible2: false,
      dialogVisible3: false,
      dialogVisible4: false,

      //上传附件
      selectCZ: " ",
      selectLight: " ",
      selectMax: "",
      moderCZ: {},
      moderLight: {},
      moderMax: {},
      cascaderProps: {
        label: "name",//当返回的数据字段不是label和value可以改成实际的字段比如goodsName
        value: "id",
        children: "SceneTypeChildren",
        lazy: true,
        lazyLoad: this.QuerySceneTypeMsg
      }

    }
  }, computed: {
    ...mapGetters(['name', 'roles', 'avatar', 'introduction', 'permissions', 'isLogin', 'token', 'deptId']),
  }
  , methods: {
    exit(){
      this.files=[];
    },
    upAttachment1(file,fileLists){
      this.file.push(file)

    },
    //上传附件
    upAttachments(){
      let task={
        taskId:this.taskId3,
        modelLightName:this.lightName,
        modelLightId:this.lightId,
        modelCzName:this.czName,
        modelCzId:this.czId,
        modelMaxId:this.maxId,
        modelMaxName:this.maxName
      }

      let fd = new FormData();
      fd.append("taskId",this.taskId3);
      fd.append("modelLightName",this.lightName);
      fd.append("modelLightId",this.lightId);
      fd.append("modelCzName",this.czName);
      fd.append("modelMaxId",this.maxId);
      fd.append("modelMaxName",this.maxName);
      fd.append("modelCzId",this.czId);

      for (let from of this.file) {
        console.log(from)
        fd.append("files",from.raw)
      }

      upAttachment(fd).then(response=>{
        if (response>0){
          alert("成功!")
          this.IsUploadAttachment = false;
        }
      })



    }
    ,
    getCz(data){
      const {value,label} = data

      this.czId = value;
      this.czName = label;

    },
    getLight(data){
      const {value,label} = data

      this.lightId = value;
      this.lightName= label;
    },
    showImage(){
      console.log(this.tableData.image)
    },
    getMax(data){
      const {value,label} = data

      this.maxId = value;
      this.maxName = label;
    }
    ,
    //上传附件
    UploadAttachment(val){
      this.taskId3 = val.id;
      this.IsUploadAttachment = true;

    }
    ,
    Show(selectSceneType){
      this.selectSceneType1  = selectSceneType;


    },
    //上传主图
    handleUploadImg(val){

      let param = new FormData();
      param.append("file",val.file)

      upload(param).then(response=>{
        this.url = response;
      })


    }
    ,
    clickMain(){
      let task={
        sceneName:this.selectSceneType1.toString(),
        String: this.selectStyleType,
        picType: this.selectPicType,
        image:this.url,
        taskId:this.taskId1
      }
      upClick(task).then(res=>{
        alert(res)
        this.IsUploadMasterPic = false;
      })

    },
    uploadPictures(){
      let form = new FormData();

      form.append("taskId",this.taskId2);
      form.append("picType",2);
      for (let fm of this.files) {
        form.append("files",fm.raw)

      }
      uploadPictures(form).then(response=>{
        if (response>0){
          alert("成功！")
          this.IsUploadPresentedPic = false;
          this.files = [];
        }

      })

    },

    IsUploadPresentedPic1(val){
      this.taskId2 = val.id;
      this.IsUploadPresentedPic = true;
    },
    handleUpload1 (file, fileLists) {
      this.upload_btn1 = true
    },
    handleUpload2 (file, fileLists) {
      this.upload_btn2 = true
    },
    handleUpload3 (file, fileLists) {
      this.upload_btn3 = true
    },
    handleUpload4 (file, fileLists) {
      this.upload_btn4 = true
    },
    handleUpload5 (file, fileLists) {

      this.upload_btn5 = true;
    },




    //查询附件等级
    QueryModelLevel(){
      axios.get("http://127.0.0.1/api/tOrderDetail/QueryModelLevel")
        .then(response => {
          if (response != undefined) {
            this.modelLevel=response;
            console.log(this.modelLevel)
          }
        }).catch(function (error) {
        alert(error)
      })
    },
    //查询风格类型
    QueryStyleType(){
      axios.get("http://127.0.0.1/api/tOrderDetail/QueryStyleType")
        .then(response => {
          if (response != undefined) {
            this.styleType=response;
           console.log(this.styleType)
          }
        }).catch(function (error) {
        alert(error)
      })

    },
    handleUpload (file, fileLists) {
       this.upload_btn = true
      console.log("find==="+this.upload_btn)
   },
    uploadPresentedPic(file, fileLists) {
      this.files.push(file)
      this.upload_presented_pic = true
    },

    QuerySceneTypeMsg(node, resolve) {

      this.selectSceneType=node;
      console.log("value==" +node)
      this.ParentId = node.value;
      console.log("value==" +this.ParentId)

      axios.get("http://127.0.0.1/api/tOrderDetail/QuerySceneType", {
        params: {
          id: this.ParentId,
        }
      })
        .then(response => {
          if (response != undefined) {
              this.selectSceneType=response;
              resolve(this.selectSceneType);
          }
        }).catch(function (error) {
        alert(error)
      })
    },
    QuerySceneType() {//查询场景状态信息
      axios.get("http://127.0.0.1/api/tOrderDetail/QuerySceneType", {
        params: {
          id: this.ParentId,
        }
      })
        .then(response => {
          if (response != undefined) {
            this.sceneType=response;
          }
        }).catch(function (error) {
        alert(error)
      })
    },
    QueryAttType() {//查询附件材质信息
      axios.get("http://127.0.0.1/api/tOrderDetail/QueryAttachmentType", {
        params: {
          id: 1,
          type: "model_cz_name"

        }
      })
        .then(response => {
          if (response != undefined) {
            this.moderCZ = response
            //查询附件灯光
            axios.get("http://127.0.0.1/api/tOrderDetail/QueryAttachmentType", {
              params: {
                id: 1,
                type: "model_light_name"

              }
            })
              .then(response => {
                if (response != undefined) {
                  this.moderLight = response

                  //查询附件max版本信息
                  axios.get("http://127.0.0.1/api/tOrderDetail/QueryAttachmentType", {
                    params: {
                      id: 1,
                      type: "model_max_name"

                    }
                  })
                    .then(response => {
                      if (response != undefined) {
                        this.moderMax = response

                      } else {
                        alert("服务器异常")
                      }
                    }).catch(function (error) {
                    alert(error)
                  })

                } else {
                  alert("服务器异常")
                }
              }).catch(function (error) {
              alert(error)
            })
          } else {
            alert("服务器异常")
          }
        }).catch(function (error) {
        alert(error)
      })
    },
    ClickUploadMaster(val) {//单机上传主图
      console.log(val)
      this.taskId1 = val.id;
      this.IsUploadMasterPic = true;
    },
    ClickParticulars(taskMsg) {//单机详情
      console.log(taskMsg)
      this.taskDesigning = true;
      this.taskMsg = taskMsg;
      console.log(this.taskMsg)
      this.taskDateName = this.taskMsg.taskName;
      //将详情页传入的订单id对应的订单信息查询出来
      // this.QueryOrderNameById(this.taskDate.orderId)
      // this.QueryDetailImage()
    },
    //查询任务图片
    QueryDetailImage() {

      // axios.get("http://127.0.0.1/api/orderImage/QueryDetailPicture", {
      axios.get("http://127.0.0.1/api/tOrderDetail/QueryDetailPicture", {
        params: {
          id: this.taskDate.id
        }
      })
        .then(response => {
          if (response != undefined) {
            this.taskImage = response
            console.log("image" + this.taskImage)
          } else {
            alert("服务器异常")
          }
        }).catch(function (error) {
        alert(error)
      })
    },
    ShowClick() {
      this.status = this.typeStatus
      this.QueryAllDetail(1)
    },
    //逻辑删除任务
    deleteTask(e) {
      let id = e;
      alert("id====" + id)
      axios.put("http://127.0.0.1/api/tOrderDetail/IsDelete/" + id)
        .then(response => {
          if (response != undefined) {
            //关闭对话框
            this.taskDesigning = false;
            //刷新任务列表
            this.QueryAllDetail(1)
          }


        }).catch(function (error) {
        alert(error)
      });
    },

    QueryOrderNameById(e) {
      let id = e
      axios.get("http://127.0.0.1/api/tOrderDetail/QueryOrderNameById", {
        params: {
          id: id
        }
      })
        .then(response => {
          if (response != undefined) {
            this.order = response
            console.log("order==" + this.order.orderNo)
          }
        }).catch(function (error) {
        alert(error)
      })

    },
    QueryAllDetail(e) {
      this.pagNum = e
      axios.get("http://127.0.0.1/api/tOrderDetail/QueryAllDetail", {
        params: {
          taskName: this.searchCriteria,
          status: this.status,
          companyId: this.companyId,
          modelLevelId:this.selectModelLevel,
          index: this.pagNum
        }
      }).then(response => {
        console.log(response)
        if (response != undefined) {
          this.tableData = response.list
          console.log(this.tableData)
          this.pages = response.total
          this.pageSize = response.pageSize
          this.pageNum = response.pageNum
        }
      }).catch(function (error) {
        alert(error)
      })
    },
    //查询各个状态的任务数量
    QueryDetailsStatus() {
      axios.get("http://127.0.0.1/api/tOrderDetail/QueryDetailsStatus").then(response => {
        console.log(response)
        if (response.code = 200) {
          this.totalNumber = "全部" + "(" + response.totalNumber + ")"
          this.makeCount = "制作中" + "(" + response.makeCount + ")"
          this.completeMinimap = "完成小图" + "(" + response.completeMinimap + ")"
          this.waiting = "等待中" + "(" + response.waiting + ")"
          this.cancel = "已取消" + "(" + response.cancel + ")"
          this.finished = "已完成" + "(" + response.finished + ")"
        } else {
          alert("服务器异常")
        }
      }).catch(function (error) {
        alert(error)
      })
    },//查询公司信息
    QueryCompanyMsg() {
      axios.get("http://127.0.0.1/api/tOrderDetail/QueryCompanyMsg").then(response => {
        console.log(response)

        if (response != null) {
          this.tableCompany = response
        }
      }).catch(function (error) {
        alert(error)
      })
    },
    getStatus(e) {
      if (e === 0) {
        this.status = ''
      } else if (e === 1) {
        this.status = "1"
      } else if (e === 2) {
        this.status = "2"
      } else if (e === 3) {
        this.status = "3"
      } else if (e === 4) {
        this.status = "4"
      } else if (e === 5) {
        this.status = "5"
      }
      this.QueryAllDetail(1)
    },

    handleClick(tab, event) {
      if (tab.index === "0") {
        this.taskList = true;
        this.workStatus = false
      } else {
        this.taskList = false;
        this.workStatus = true
      }
      console.log(tab, event);
    },
    tableRowClassName({row, rowIndex}) {
      if (rowIndex === 1) {
        return 'warning-row';
      } else if (rowIndex === 3) {
        return 'success-row';
      }
      return '';
    }, handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {
        });
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
  },
  created: function () {
    this.QueryDetailsStatus()
    this.QueryCompanyMsg();
    this.QueryAllDetail(1)
    this.QueryAttType()
    this.QuerySceneType()
    this.QueryStyleType()
    this.QueryModelLevel()//附件下拉框信息

  }

}
</script>

<style scoped>
#div10{
  display: inline-block;
  width:100%;
  height: 100px;
  background-color:RGB(245,245,245);
}
/*#dialog—task—list{*/
/*  height: 600px;*/
/*}*/
/*#dialog-master-pic{*/
/*  height: 300px;*/
/*}*/


::v-deep .bg-purple{
  background-color: white;
}
::v-deep .grid-content{
  min-height: 0px;
}
::v-deep  .upload_presented_pic .el-upload--picture-card{
  display: none;
}
::v-deep .hide_box .el-upload--picture-card {
  display: none;
}
/*::v-deep .el-upload.el-upload--picture-card{*/
/*  display: none;*/
/*}*/
#butPresented{
  display: inline-block;
  position: relative;
  left: 790px;
  bottom: 20px;
}

/*::v-deep .el-dialog{*/
/*  height: 700px;*/
/*}*/

::v-deep #dialog-presented-pic{
  height: 700px;
}


::v-deep .el-upload--picture-card {
  width: 100px !important;
  height: 80px !important;
  line-height: 80px !important;
  font-size: 12px !important;

}


::v-deep .el-upload-list--picture-card .el-upload-list__item-actions {
  width: 100px !important;
  height: 80px !important;
  line-height: 80px !important;
}

::v-deep .el-upload-list--picture-card .el-upload-list__item {
  width: 100px !important;
  height: 80px !important;
  line-height: 80px !important;
}

.infinite-list {
  height: 580px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.infinite-list-item {
  display: flex;
  align-items: center;
  height: 100px;

  margin: 10px;
}


::v-deep .el-tabs__header {
  margin-bottom: 0;
}

#span1 {
  font-size: 16px;
}

.span1 {
  font-size: 14px;
}

#deleteTask {
  display: inline-block;
  position: relative;
  left: 400px;
}


#div1 {
  display: inline-block;
  position: relative;
  right: 10px;
}


#div2 {
  display: inline-block;
  position: relative;
  top: 10px;
  right: 680px;


}

#div3 {
  display: inline-block;
  position: relative;
  bottom: 22px;
  left: 200px;
}

.a_operation {
  text-decoration: none;
  color: #1787FB
}

.a_operation:hover {
  cursor: pointer;
}

#div4 {
  display: inline-block;
  position: relative;
  left: -10px;
}

.divBox {

}

</style>

